<template>
  <div class="basicInfo">
     <div id="container" v-show="!loader.show">
        <div class="header_group">
              <h6>基本信息</h6>
              <p>姓名、性别、年龄、自我描述</p>
        </div>
        <ul class="info1">
             <li>
                 <label>手机号</label>
                 <input type="text" v-model="mobile" placeholder="手机号" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')"/>
             </li>
             <li>
                 <label>验证码</label>
                 <input type="text" v-model="code" placeholder="验证码" maxlength="6" onkeyup="value=value.replace(/[^\d]/g,'')"/>
                 <button class="getCode" @click="clock();">{{getCodeHint}}</button>
             </li>
        </ul>
        <ul class="info2">
             <li>
                 <label>姓名</label>
                 <input type="text" v-model="chname" placeholder="姓名" />
             </li>
             <li @click="sex_tab_show=!sex_tab_show">
                 <label>性别</label>
                 <input type="text" v-model="sexWord" readonly placeholder="选择性别"/>
             </li>
             <li @click="selectedDate.show=true">
                 <label>出生日期</label>
                 <input type="text" v-model="birth" readonly placeholder="选择出生日期"/>
             </li>
        </ul>
        <div class="info3">
             <p>自我描述</p>
             <textarea v-model="description" placeholder="性格，经历，爱好，擅长等"></textarea>
             <div class="count">{{description.length}}/150</div>
        </div>
        <p class="commit" @click="commit();">保存基本信息</p>
        <!--性别选项卡-->
        <div class="sex_prop" v-show="sex_tab_show" @click="closeProp();">
             <ul class="tab">
                  <li :class="{'active':sex==-1}">
                      <label>未选择</label>
                      <input type="radio" name="sex" value="-1" v-model="sex"/>
                  </li>
                  <li :class="{'active':sex==0}">
                      <label>男</label>
                      <input type="radio" name="sex" value="0" v-model="sex"/>
                  </li>
                  <li :class="{'active':sex==1}">
                      <label>女</label>
                      <input type="radio" name="sex" value="1" v-model="sex"/>
                  </li>
             </ul>
        </div>
     </div>
     <!--日历-->
     <date :selectedDate="selectedDate"></date>
     <!--公共提示-->
     <tip :tip="tip" :loading="loading" :loader="loader"></tip>
  </div>
</template>

<script>
import tip from './tip'
import date from './date'
export default {
  name:'basicInfo',
  data () {
    return {
      mobile: '',
      code:'',
      chname:'',
      description:'',
      sex:-1,
      sexWord:'',
      birth:'',
      sex_tab_show:false,
      tip:{
        status:false,
        msg:''
      },
      loading:{
        status:false,
        msg:''
      },
      loader:{
        show:true
      },
      userId:'',
      getCodeHint:'获取验证码',
      url:'',
      selectedDate:{
        actual:'',
        temporary:'',
        show:false,
        year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017]
      }
    }
  },
  components:{
    tip,date
  },
  mounted:function(){
    this.userId = this.$route.query.userId;
    this.getInitialData();
    this.checkSex();
  },
  watch:{
    'description':function(){
      if(this.description.length>150){
          this.description=this.description.substring(0,150);
      }
    },
    'sex':function(){
       this.checkSex();
    },
    'selectedDate.actual':function(){
      this.birth=this.selectedDate.actual;
    }
  },
  methods:{
    getInitialData(){
        let _this=this;
        _this.$http.get("/api/teacherController.do?id="+_this.userId+"&getTeacherBaseInfoById=null").then((data)=>{
           console.log(data);
           if(data.body.chname){
             _this.birth=data.body.birth;
             _this.selectedDate.actual=data.body.birth;
             _this.selectedDate.temporary=data.body.birth;
             _this.chname=data.body.chname;
             _this.description=data.body.description;
             _this.mobile=data.body.mobile;
             _this.sex=data.body.sex;
             _this.url="/api/teacherController.do?updateTeacherBaseInfo";
           }else{
             _this.url="/api/teacherController.do?saveTeacherBaseInfo";
           }
           _this.loader.show=false;
        })
    },
    clock(){
      let _this=this;
      if(!(/^1(3|4|5|7|8)\d{9}$/.test(_this.mobile))){ 
        _this.showTip("请输入有效的手机号码"); 
        return false; 
      } 
      _this.$http.get("/api/comnControl.do?mobileNo="+_this.mobile+"&getMessageAuthenticationCode=null")
      .then(
        (response)=>{
            _this.showTip("短信验证码已发送");
            let t=60;
            let timer=setInterval(function(){
              t--;
              if(t>0){
                 _this.getCodeHint=t+'s';
              }else{
                 clearTimeout(timer);
                 _this.getCodeHint="重新获取";
              }
            },1000)
        },
        (error)=>{
          console.log(error);
        }
      );
    },
    closeProp(){
       let _this=this;
       setTimeout(function(){
         _this.sex_tab_show=false;
       },100);
    },
    checkSex(){
       if(this.sex==-1){
          this.sexWord="未选择";
        }else if(this.sex==0){
          this.sexWord="男";
        }else if(this.sex==1){
          this.sexWord="女";
        }
    },
    showTip(msg){
        let _this=this;
        _this.tip.msg=msg;
        _this.tip.status=true;
        setTimeout(function(){_this.tip.status=false;},1000);
    },
    commit(){
        let _this=this;
        if(!(/^1(3|4|5|7|8)\d{9}$/.test(_this.mobile))){
            _this.showTip("请输入有效手机号码");
            return false;
        }
        if(!_this.chname){
            _this.showTip("请输入姓名");
            return false;
        }
        if(_this.sex==-1){
            _this.showTip("请选择性别");
            return false;
        }
        if(!_this.birth){
            _this.showTip("请选择出生日期");
            return false;
        }
        if(!_this.description){
            _this.showTip("请填写个人描述");
            return false;
        }
        _this.loading.msg="提交中...";
        _this.loading.status=true;
        _this.url=_this.url;
        _this.$http.post(_this.url+'&mobile='+_this.mobile+'&authCode='+_this.code,
                        {
                            id:_this.userId,
                            chname: _this.chname,
                            sex: _this.sex,
                            birth: _this.birth,
                            description: _this.description
                        })
            .then(
              (response)=>{
                console.log(response);
                 _this.loading.status=false;
                 if(response.body.result=='ok'){
                     _this.showTip("保存成功");
                     setTimeout(function(){
                        _this.tip.status=false;
                        _this.$router.push({path: '/index'});
                     },1000);
                 }else if(response.body.result=='error'){
                     _this.showTip(response.body.desc);
                 }
              },
              (error)=>{
                _this.loading.status=false;
                console.log(error);
              }
            );
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.basicInfo
{
    .header_group
    {
        padding:0.5rem 0;
        text-align:center;
        h6
        {
          color:#078def;
          font-size:0.5rem;
          margin-bottom:0.3rem;
        }
        p 
        {
          color:#999;
        }
    }
    .info1
    {
      background:#fff;
      padding-left:0.3rem;
      li
      {
        position:relative;
        padding:0 2rem 0 1.4rem;
        height:0.88rem;
        line-height:0.88rem;
        &:first-child
        {
          border-bottom:1px solid #eee;
          padding:0 0 0 1.4rem;
        }
        label
        {
          line-height:0.88rem;
          height:0.88rem;
          position:absolute;
          left:0;
          top:0;
          font-size:0.28rem;
        }
        input
        {
          width:100%;
          border:none;
        }
        .getCode
        {
          line-height:0.55rem;
          height:0.59rem;
          border:1px solid #078def;
          border-radius:0.1rem;
          color:#078def;
          width:1.8rem;
          text-align:center;
          position:absolute;
          right:0.3rem;
          top:0.15rem;
          background:#fff;
          font-size:0.24rem;
        }
      }
    }
    .info2
    {
      background:#fff;
      padding-left:0.3rem;
      margin-top:0.3rem;
      li
      {
        position:relative;
        padding:0 0 0 1.4rem;
        height:0.88rem;
        line-height:0.88rem;
        &:first-child
        {
          border-bottom:1px solid #eee;
        }
        &:nth-child(2),
        &:nth-child(3)
        {
          border-bottom:1px solid #eee;
          position:relative;
          &::after 
          {
             content:'';
             display:inline-block;
             width:0.15rem;
             height:0.15rem;
             border-right:1px solid #999;
             border-top:1px solid #999;
             position:absolute;
             right:0.3rem;
             top:0.36rem;
             -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                 -ms-transform: rotate(45deg);
                  -o-transform: rotate(45deg);
                     transform: rotate(45deg);
          }
        }
        label
        {
          line-height:0.88rem;
          height:0.88rem;
          position:absolute;
          left:0;
          top:0;
          font-size:0.28rem;
        }
        input
        {
          width:100%;
          border:none;
          background:transparent;
        }
      }
    }
    .info3
    {
      position:relative;
      p
      {
        padding:0.3rem 0.3rem 0.1rem 0.3rem;
        color:#666;
        font-size:0.28rem;
      }
      textarea
      {
        padding:0.2rem 0.3rem 0.5rem 0.3rem;
        line-height:1.2;
        box-sizing:border-box;
        width:100%;
        height:2.5rem;
        border:none;
      }
      .count
      {
        position:absolute;
        bottom:0.2rem;
        right:0.3rem;
      }
    }
    .commit
    {
        margin:0.2rem 0.24rem;
        line-height:0.8rem;
        height:0.8rem;
        border-radius:0.1rem;
        border:1px solid #ccc;
        text-align:center;
        background:#078def;
        color:#fff;
        font-size:0.32rem;
    }
    .sex_prop
    {
      width:100%;
      height:100%;
      position:fixed;
      background:rgba(0,0,0,0.5);
      left:0;
      top:0;
      .tab
      {
        padding:0.3rem 0;
        width:6rem;
        background:#fff;
        position:absolute;
        left:50%;
        top:50%;
        margin-top:-1.35rem;
        margin-left:-3rem;
        li
        {
           line-height:0.8rem;
           height:0.8rem;
           padding:0 0.4rem;
           position:relative;
           &::before
           {
             content:'';
             width:0.3rem;
             height:0.3rem;
             border:1px solid #ccc;
             border-radius:50%;
             display:inline-block;
             vertical-align:middle;
           }
           &.active
           {
             &::before
             {
               content:'√';
               width:0.3rem;
               height:0.3rem;
               line-height:0.34rem;
               text-align:center;
               font-size:0.2rem;
               border:1px solid #078def;
               background:#078def;
               color:#fff;
               border-radius:50%;
               display:inline-block;
               vertical-align:middle;
             }
           }
           label
           {
             margin-left:0.1rem;
           }
           input
           {
             width:100%;
             height:100%;
             position:absolute;
             left:0;
             top:0;
             border:none;
             z-index:1001;
           }
        }
      }
    }
}
</style>
